<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}
			
			a {
				text-decoration: none;
				color: #000000;
			}
			
			li {
				list-style: none;
			}
			
			/* 标题栏页开始 */
			#head {
				transition: .5s;
				position: relative;
				width: 1920px;
				height: 640px;
				background: url(./image/addbanner-2.png) no-repeat fixed;
				
			}
			
			.title {
				width: 1920px;
				height: 35px;
				padding: 20px 0 0;
				background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent);
				color: #fff;
			}
			
			.logo {
				width: 1020px;
				position: absolute;
				left: calc(50% - 510px);
			}
			
			.logo>img {
				display: block;
				float: left;
				padding-right: 25px;
			}
			
			.title-IT {
				height: 35px;
				float: left;
				font-size: 14px;
				font-weight: 500;
				padding-left: 20px;
				border-left: 1px solid #fff;
			}
			
			.title-IT>p {
				height: 18px;
			}
			
			.meau>span {
				position: relative;
				display: block;
				float: left;
				width: 100px;
				height: 25px;
			}
			
			.meau a {
				font-size: 16px;
				color: #fff;
				position: absolute;
				right: 0;
			}
			
			.introduce {
				position: absolute;
				width: 1020px;
				height: 120px;
				left: calc(50% - 510px);
				bottom: -60px;
				background-color: #fff;
				box-shadow: 0px 2px 3px #cfcfcf;
				overflow: hidden;
			}
			
			/* head 控件 */
			#kongjian ul {
				position: absolute;
				top: 550px;
				left: calc(50% - 100px);
			}
			
			#kongjian li {
				float: left;
				width: 40px;
				height: 5px;
				background-color: #000000;
				opacity: 0.5;
				margin: 0 5px;
			}
			
			#kongjian li:hover {
				background-color: #3697d9;
			}
			/* title介绍栏 */
			
			
			.introduce li {
				position: relative;
				height: 120px;
				float: left;
				text-align: center;
				overflow: hidden;
			} 
			
			.introduce .picture {
				position: relative;
				width: 84px;
				height: 75px;
				margin: 23px 0;
				text-align: center;
			}

			.introduce li>div {
				float: left;
			}
			
			.introduce .picture img {
				position: absolute;
				top: calc(50% - 21px);
			}
			
			.introduce .word {
				width: 150px;
				height: 75px;
				margin-left: 20px;
			}
			
			.introduce .word p:nth-child(1) {
				margin-top: 45px;
				font-size: 18px;
				line-height: 18px;
				color: #333;
			}
			
			.introduce .word p:nth-child(2) {
				line-height: 14px;
				color: #999;
				font-size: 14px;
				margin-top: 8px;
			}
			
			.introduce .click {
				transition: .3s;
				position: absolute;
				bottom: -74px; 
				left: calc(50% - 117px);
				background: rgba(222, 41, 134, 0.9);
				width: 234px;
				height: 74px;
			}
			
			.introduce li:hover .click {
				bottom: calc(50% - 32px); 
			}
			
			.introduce .click>a {
				display: block;
				width: 100px;
				height: 30px;
				line-height: 30px;
				color: #fff;
				border-radius: 5px;
				border: 2px solid #fff;
				margin: 0 auto;
				margin-top: 22px;
			}
			
			
			/* 项目区域 */
			#project {
				width: 1920px;
				height: 195px;
			}
			
			#project li {
				float: left;
				width: 380px;
				height: 43px;
				padding: 105px 0 45px;
				text-align: center;
			}
			
			#project li>p:nth-child(1) {
				color: #333333;
				font-size: 27px;
			}
			
			#project li>p:nth-child(2) {
				color: #666666;
				font-size: 14px;
			}
			
			/* 数据区域 */
			#data {
				width: 1920px;
				height: 671px;
				overflow: hidden;
			}
			
			#data .shidai {
				width: 1920px;
				height: 90px;
				margin-top: 70px;
				text-align: center;
			}
			
			#data .shidai>p:nth-child(1) {
				color: #333333;
				font-size: 38px;
			}
			
			#data .shidai>p:nth-child(2) {
				color: #999999;
				font-size: 20px;
				margin-top: 20px;
			}
			
			#data .shuju>div{
				width: 1020px;
				height: 360px;
				margin: 65px auto 0;
			}
			
			#data .shuju>div>div {
				width: 280px;
				height: 360px;
				background-color: #de2986;
				float: left;
				margin-right: 90px;
			}
			
			#data .shuju>div>div:last-child {
				margin-right: 0;
			}
			
			#data .container {
				position: relative;
			}
			
			#data .container>p:nth-child(1) {
				width: 160px;
				height: 90px;
				color: #fff;
				font-size: 24px;
				font-weight: 700;
				text-align: center;
				margin: 0 auto;
				line-height: 90px;
			}
			
			#data .container>p:nth-child(2) {
				width: 130px;
				height: 30px;
				font-size: 20px;
				color: #de2986;
				background-color: #fff;
				text-align: center;
				line-height: 30px;
				margin: 0 auto;
				font-weight: 500;
				border-radius: 4px;
			}
			
			#data .circle {
				position: absolute;
				top: 160px;
				left: 60px;
				width: 140px;
				height: 140px;
				background-color: #de2986;
				border-radius: 0 160px 160px 0;
				border: 10px solid #fff;
				border-left-color: #de2986;
				border-top-color: #de2986;
				border-bottom-color: #DE2986;
			}
			
			#data .circle>p:nth-child(1) {
				margin-top: 40px;
				color: #fff;
				font-size: 16px;
				font-weight: 400;
				text-align: center;
			}
			
			#data .circle>p:nth-child(2) {
				text-align: center;
				color: #fff;
				font-size: 27px;
				font-weight: 700;
			}
			
			/* 设计师轮播图部分 */
			#designer {
				width: 1920px;
				height: 770px;
				background-image: url(./image/designer-bg.jpg);
				overflow: hidden;
			}
			
			#designer .company {
				width: 1920px;
				height: 90px;
				margin: 70px 0 0;
			}
			
			#designer .company>p:nth-child(1) {
				height: 38px;
				font-size: 38px;
				text-align: center;
				line-height: 38px;
				color: #fff;
				margin-bottom: 20px;
			}
			
			#designer .company>p:nth-child(1)>span {
				color: #de2986;
			}
			
			#designer .company>p:nth-child(2) {
				height: 32px;
				font-size: 20px;
				color: #999999;
				line-height: 32px;
				text-align: center;
			}
			
			#designer .ability {
				position: relative;
				width: 1000px;
				height: 517px;
				margin: 0 auto;
				margin-top: 40px;
			}
			
			#designer .biankuang {
				position: absolute;
				width: 118px;
				height: 455px;
				background-color: #fff;
				top: 9px;
				left: -9px;
			}
			
			#designer .banner {
				position: relative;
				width: 590px;
				height: 454px;
				overflow: hidden;
			}
			
			#designer .rongqi {
				transition: .5s;
				position: absolute;
				left: 0;
				top: 0;
				width: 2590px;
				height: 454px;
			}
			
			#designer .zhuti {
				position: relative;
				width: 590px;
				height: 454px;
				float: left;
				/* z-index: 5; */
			}
			
			#designer .zhuti>img {
				width: 100%;
				height: 100%;
			}
			
			#designer .zhuti>p:nth-child(2) {
				position: absolute;
				bottom: 99px;
				left: calc(50% - 170px);
				width: 340px;
				height: 44px;
				background-color: #de2986;
				text-align: center;
				line-height: 44px;
				font-size: 24px;
				color: #fff;
				z-index: 2;
			}
			
			#designer .zhuti>p:nth-child(3) {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 540px;
				height: 31px;
				background-color: #000000;
				opacity: 0.8;
				font-size: 15px;
				color: #fff;
				line-height: 25px;
				padding: 40px 30px 55px 20px;
				
			}
			
			
			#designer .kongjian {
				position: relative;
				margin-top: -34px;
				margin-left: 20px;
				width: 450px;
				height: 90px;
				background-color: #fff;
				border-radius: 0 38px 0 38px;
			}
			
			#designer .kongjian li {
				width: 90px;
				height: 90px;
				float: left;
			}

			#designer .kongjian li:hover {
				background-color: #de2986;
			}
			
			#designer .kongjian li p:nth-child(1) {
				width: 43px;
				height: 43px;
				margin: 10px 23px 5px;
			}
			
			#designer .kongjian li:nth-child(1) span {
				display: block;
				width: 43px;
				height: 43px;
				background: url(./image/xuebi.png) no-repeat -177px -47px;
			}
			
			#designer .kongjian li:nth-child(2) span {
				display: block;
				width: 43px;
				height: 43px;
				background: url(./image/xuebi.png) no-repeat 0 -47px;
			}
			
			#designer .kongjian li:nth-child(3) span {
				display: block;
				width: 43px;
				height: 43px;
				background: url(./image/xuebi.png) no-repeat -43px -47px;
			}
			
			#designer .kongjian li:nth-child(4) span {
				display: block;
				width: 43px;
				height: 43px;
				background: url(./image/xuebi.png) no-repeat -85px -47px;
			}
			
			#designer .kongjian li:nth-child(5) span {
				display: block;
				width: 43px;
				height: 43px;
				background: url(./image/xuebi.png) no-repeat -130px -47px;
			}
			
			#designer .kongjian li:nth-child(1):hover span{
				background: url(./image/xuebi.png) no-repeat -177px 0;
			}
			
			#designer .kongjian li:nth-child(2):hover span{
				background: url(./image/xuebi.png) no-repeat 0 0;
			}
			
			#designer .kongjian li:nth-child(3):hover span{
				background: url(./image/xuebi.png) no-repeat -43px 0;
			}
			
			#designer .kongjian li:nth-child(4):hover span{
				background: url(./image/xuebi.png) no-repeat -85px 0;
			}
			
			#designer .kongjian li:nth-child(5):hover span{
				background: url(./image/xuebi.png) no-repeat -130px 0;
			}

			#designer .kongjian li p:nth-child(2) {
				font-size: 15px;
				color: #666666;
				text-align: center;
			}
			
			#designer .kongjian li:hover p:nth-child(2) {
				color: #fff;
			}
			
			/*  主流设计平台学习部分 */
			#zhuliu {
				width: 1920px;
				height: 777px;
				overflow: hidden;
			}
			
			#designer .pingtai {
				width: 1920px;
				height: 90px;
				margin: 70px 0 0;
			}
			
			#zhuliu .pingtai>p:nth-child(1) {
				height: 38px;
				font-size: 38px;
				text-align: center;
				line-height: 38px;
				color: #000;
				margin: 100px 0 20px 0;
			}
			
			#zhuliu .pingtai>p:nth-child(2) {
				height: 32px;
				font-size: 20px;
				color: #999999;
				line-height: 32px;
				text-align: center;
				margin-bottom: 50px;
			}
			
			#zhuliu .diannao {
				position: relative;
				width: 950px;
				height: 495px;
				margin: 0 auto;
				padding: 0 25px;
				overflow: hidden;
			}
			
			#zhuliu .bijiben {
				position: relative;
				width: 351px;
				height: 212px;
				background: url(./image/mac_book.png) no-repeat;
				margin-top: 185px;
				float: left;
			}
			
			#zhuliu .bijiben>div {
				position: absolute;
				width: 267px;
				height: 168px;
				top: 11px;
				left: 42px;
				overflow: hidden;
			}
			
			#zhuliu .book-img {
				transition: .5s;
				width: 2136px;
				height: 168px;
			}
			
			#zhuliu .book-img img {
				display: block;
				float: left;
			}
			
			#zhuliu .yiti {
				position: relative;
				width: 426px;
				height: 342px;
				background: url(./image/mac_yiti.png) no-repeat;
				margin-top: 42px;
				margin-left: -115px;
				float: left;
				z-index: 2;
			}
			
			#zhuliu .yiti>div {
				position: absolute;
				top: 17px;
				left: 17px;
				width: 394px;
				height: 222px;
				overflow: hidden;
			}
			
			#zhuliu .yiti-img {
				transition: .5s;
				width: 3152px;
				height: 222px;
			}
			
			#zhuliu .yiti-img img {
				display: block;
				float: left;
			}
			
			#zhuliu .kongjian {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 950px;
				height: 127px;
				overflow: hidden;
			}
			
			#zhuliu .kongjian ul {
				width: 238px;
				height: 12px;
				margin: 0 auto;
				margin-top: 80px;
			}
			
			#zhuliu .kongjian li {
				transition: .5s;
				width: 12px;
				height: 12px;
				background-color: #cccccc;
				border-radius: 50%;
				margin: 0 7px;
				float: left;
			}
			
			#zhuliu .kongjian li:hover {
				background-color: #DE2986;
				width: 40px;
				height: 12px;
				border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<!-- 标题区域 -->
		<div id="head" style="background-position: 0 0;">
			<div class="title">
				<div class="logo">
					<img src="./image/达内logo.png">
					<div class="title-IT">
						<p>美国上市公司</p>
						<p>亿元级外企IT培训企业</p>
					</div>
					<div class="meau">
						<span><a href="#">首页</a></span>
						<span><a href="#">授课讲师</a></span>
						<span><a href="#">合作企业</a></span>
						<span><a href="#">在线试听</a></span>
						<span><a href="#">联系达内</a></span>
					</div>
				</div>
				<div class="introduce">
					<ul>
						<li>
							<div class="picture">
								<img src="./image/movie-logo.png" >
							</div>
							<div class="word">
								<p>3分钟了解达内</p>
								<p>美国上市公司</p>
							</div>
							<div class="click">
								<a href="#">点击查看</a>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="./image/pen-logo.png" >
							</div>
							<div class="word">
								<p>什么是UID设计？</p>
								<p>互联网行业的高富帅</p>
							</div>
							<div class="click">
								<a href="#">点击查看</a>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="./image/tie-logo.png" >
							</div>
							<div class="word">
								<p>设计讲堂</p>
								<p>课程解读</p>
							</div>
							<div class="click">
								<a href="#">点击查看</a>
							</div>
						</li>
						<li>
							<div class="picture">
								<img src="./image/right-logo.png" >
							</div>
							<div class="word">
								<p>Adobe认证中心</p>
								<p>全国认证中心电话</p>
							</div>
							<div class="click">
								<a href="#">点击查看</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div id="kongjian">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<!-- 项目区域 -->
		<div id="project">
			<ul>
				<li>
					<p><a href="#">CEAC合作项目</a></p>
					<p><a href="#">创意设计人才培养工程</a></p>
				</li>
				<li>
					<p><a href="#">Adobe授权培训</a></p>
					<p><a href="#">达内与设计软件厂商Adobe合作</a></p>
				</li>
				<li>
					<p><a href="#">全链路UID课程</a></p>
					<p><a href="#">9大主流软件+前端技能</a></p>
				</li>
				<li>
					<p><a href="#">达内职业责任险</a></p>
					<p><a href="#">达内与保险公司合作</a></p>
				</li>
				<li>
					<p><a href="#">可先就业后付款</a></p>
					<p><a href="#">学院可选择就业后再付款模式</a></p>
				</li>
			</ul>
		</div>
		<!-- 数据区域 -->
		<div id="data">
			<div class="shidai">
				<p>互联网+时代，指数型增长的设计师身价</p>
				<p>设计师在整个商业链条中的地位不断攀升</p>
			</div>
			<div class="shuju">
				<div>
					<div class="container">
						<p>全链路UI设计</p>
						<p>14655份样本</p>
						<div class="circle">
							<p>月均薪</p>
							<p>&yen;11420</p>
						</div>
					</div>
					<div class="container">
						<p>视觉设计</p>
						<p>5318份样本</p>
						<div class="circle">
							<p>月均薪</p>
							<p>&yen;11450</p>
						</div>
					</div>
					<div class="container">
						<p>交互设计师</p>
						<p>3054份样本</p>
						<div class="circle">
							<p>月均薪</p>
							<p>&yen;16640</p>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<!-- 设计师轮播图部分 -->
		<div id="designer">
			<div class="company">
				<p>源自4A设计公司需求，<span>培养总监设计师思维</span></p>
				<p>助你拥有“设计能力，前端能力，交互逻辑及产品思维”</p>
			</div>
			<div class="ability">
				<div class="biankuang"></div>
				<div class="banner">
					<div class="rongqi">
						<div class="zhuti">
								<img src="./image/nengli-1.jpg" >
								<p>全链路设计师占据主导地位</p>
								<p>职责不局限于好看，技能不局限于作图，角色不局限于执行，统筹商业全案，主导项目流程;</p>
							</div>
							<div class="zhuti">
								<img src="./image/nengli-2.jpg" >
								<p>设计能力</p>
								<p>职责不局限于好看，技能不局限于作图，角色不局限于执行，统筹商业全案，主导项目流程;</p>
							</div>
							<div class="zhuti">
								<img src="./image/nengli-3.jpg" >
								<p>交互逻辑</p>
								<p>职责不局限于好看，技能不局限于作图，角色不局限于执行，统筹商业全案，主导项目流程;</p>
							</div>
							<div class="zhuti">
								<img src="./image/nengli-4.jpg" >
								<p>产品思维</p>
								<p>职责不局限于好看，技能不局限于作图，角色不局限于执行，统筹商业全案，主导项目流程;</p>
							</div>
							<div class="zhuti">
								<img src="./image/nengli-5.jpg" >
								<p>前端能力</p>
								<p>职责不局限于好看，技能不局限于作图，角色不局限于执行，统筹商业全案，主导项目流程;</p>
							</div>
						</div>
					</div>
				<div class="kongjian">
					<ul>
						<li style="border-radius: 0 0 0 38px;">
							<a href="#">
								<p><span ></span></p>
								<p>全链路设计</p>
							</a>
						</li>
						<li>
							<a href="#">
								<p><span></span></p>
								<p>设计能力</p>
							</a>
						</li>
						<li>
							<a href="#">
								<p><span></span></p>
								<p>交互逻辑</p>
							</a>
						</li>
						<li>
							<a href="#">
								<p><span></span></p>
								<p>产品思维</p>
							</a>
						</li>
						<li style="border-radius: 0 38px 0 0;">
							<a href="#">
								<p><span></span></p>
								<p>前端能力</p>
							</a>
						</li>
					</ul>
				</div>
				<div class="danmu">
					
				</div>
			</div>
		</div>
		<!-- 主流设计平台学习部分 -->
		<div id="zhuliu">
			<div class="pingtai">
				<p>主流设计平台全学习，<span>助你技能满点</span></p>
				<p>致力于培养掌握多重技能的全栈商业设计</p>
			</div>
			<div class="diannao">
				<div class="bijiben">
					<div>
						<div class="book-img">
							<img src="./image/book-1.jpg" >
							<img src="./image/book-2.jpg" >
							<img src="./image/book-3.jpg" >
							<img src="./image/book-4.jpg" >
							<img src="./image/book-5.jpg" >
							<img src="./image/book-6.jpg" >
							<img src="./image/book-7.jpg" >
							<img src="./image/book-8.gif" >
						</div>
					</div>
					
				</div>
				<div class="yiti">
					<div>
						<div class="yiti-img">
							<img src="./image/yiti-1.jpg" >
							<img src="./image/yiti-2.jpg" >
							<img src="./image/yiti-3.jpg" >
							<img src="./image/yiti-4.jpg" >
							<img src="./image/yiti-5.jpg" >
							<img src="./image/yiti-6.jpg" >
							<img src="./image/yiti-7.jpg" >
							<img src="./image/yiti-8.jpg" >
						</div>
					</div>
				</div>
				<div class="kongjian">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// head 轮播大图
		var head = document.querySelector('#head');
		var li = document.querySelectorAll('#kongjian li');
		
		// function animation(element, leftEnd, duration, interval){
		// 	var leftStart = element.style.backgroundPosition;
		
		// 	var stepTmp = (leftEnd - leftStart)/(duration/interval);
		// 	var step = Math.floor(stepTmp);
		// 	if(step === 0){
		// 		step = stepTmp > 0 ? 1 : -1;
		// 	}
		// 	element.timer && clearInterval(element.timer);
			
		// 	element.timer = setInterval(function(){
		// 		// console.log(element.timer, step, element.offsetLeft - leftEnd);
		// 		if(Math.abs(leftEnd - element.style.backgroundPosition) <= Math.abs(step)){
		// 			element.style.backgroundPosition = leftEnd + 'px';
		// 			clearInterval(element.timer);
		// 		}else{
		// 			element.style.backgroundPosition = - (element.style.backgroundPosition + step) + 'px';
		// 		}
		// 	}, interval);
		// }
		
		for(var i = 0; i < li.length; i++){
			(function(i){
				li[i].onclick = function(){
					head.style.backgroundPosition = -1920 * i + 'px' + ' 0px';
				}
			})(i);
		}
		
		// 设计部分轮播图 
		var rongqi = document.querySelector('#designer .rongqi');
		var kongjian = document.querySelectorAll('#designer .kongjian li');
		
		for(var i = 0; i < li.length; i++){
			(function(i){
				kongjian[i].onmouseover = function(){
					rongqi.style.left = -590 * i + 'px';
				}
			})(i);
		}
		
		// 主流设计平台学习部分轮播图
		var book = document.querySelector('#zhuliu .book-img');
		var yiti = document.querySelector('#zhuliu .yiti-img');
		
		var yuandian = document.querySelectorAll('#zhuliu .kongjian li');
		
		for(var i = 0; i < yuandian.length; i++){
			(function(i){
				yuandian[i].onmouseover = function(){
					book.style.marginLeft = -267 * i + 'px';
					yiti.style.marginLeft = -394 * i + 'px';
				}
			})(i);
		}
	</script>
</html>
